<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv ="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>在线听课</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/ystep.css">
    <link rel="stylesheet" href="css/swiper.min.css">

    <!--选择时间插件样式-->
    <link rel="stylesheet" href="css/timePicker.css">

    <!-- 仿ElementUI的日期选择插件 -->
    <!-- <link rel="stylesheet" href="css/datepicker.css"> -->

	<link href="css/foundation-datepicker.css" rel="stylesheet" type="text/css">
    <!--页面公共样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--页面样式-->
    <link rel="stylesheet" href="css/page.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->


    <!--使es6兼容ie-->
    <script src = "js/polyfill.min.js"></script>
    <!--使es6兼容ie-->

    <!--jquery等插件必须放head，后续js需要使用-->
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.pagination.min.js"></script>
    <script src="js/setStep.js"></script>
    <script src="js/rollSlide.js"></script>



    <!--[if !IE]><!-->
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper.js"></script>
    <!--<![endif]-->

    <!--使滑动翻滚菜单支持ie9-->
    <!--[if IE]>
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/ie9.css">
    <script src="js/idangerous.swiper.js"></script>
    <![endif]-->


    <!-- 仿ElementUI的日期选择插件 -->
    <!-- <script src="js/moment.min.js"></script> -->
    <!-- <script src="js/datepicker.all.js"></script> -->

	<!-- 兼容ie时间控件 -->
	<script src="js/foundation-datepicker.js"></script>
	<script src="js/foundation-datepicker.zh-CN.js"></script>


    <!--选择时间插件-->
    <script src="js/jquery-timepicker.js"></script>

    <script src="js/txtscroll.js"></script>

    <!--四级联动-->
    <script src="data/schollArea.data.js"></script>
    <script src="js/jsAddress.js"></script>
    <!--页面js必须放head里，防止页面抖动-->
    <script src="js/common.js"></script>
    <script src="js/top.js"></script>
    <script src="js/selectMovie.js"></script>
</head>
<body>
<div class="fullbg">

</div>

<header>
    <!--登录后的头-->
    <div class="login-header">
        <div class="space-info ">
            <div class="addtress"><span>四川大学</span> <span>J17A101教室</span></div>
            <div class="username">张复兴</div>
        </div>
        <div class="status">
            <div class="live-status"></div>
            <div class="net-status"></div>
        </div>
        <div class="time-note">
            <div class="top-time">
                15:13
            </div>
            <!--<div class="top-note" id="s1">-->
            <!--<ul>-->

            <!--</ul>-->
            <!--</div>-->
            <div class="txt-scroll txt-scroll-curs top-note"  id="s1">
                <div class="scrollbox">
                    <div class="txt">

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--未登录的头-->
    <div class="unlogin-header">
        <div class="space-info">
            <div class="username">暂未登录</div>
        </div>
        <div class="status">
            <div class="live-status">暂无直播</div>
            <div class="net-status">物联网关闭</div>
        </div>
        <div class="time-note">
            <div class="top-time">

            </div>
        </div>
    </div>
</header>

<main class="online-class-page step-page">
    <div class="stepCont stepCont2">
        <!--流程显示-->
        <div class='ystep-container ystep-lg ystep-blue'></div>
        <!-- 分步容器-->
        <div class="pageCont">
            <div id="page1" class="stepPage">
                <!--填写信息页-->
                <section class="stepPageContent">
                    <h1 class="form-title">请详细填写您直播的课程内容</h1>
                    <div class="selectMovieWrap">
                        <section class="leftClassForm">
                            <form action="">
                                <div class="row">
                                    <span class="leftClassFormTitle">课堂ID号:</span>
                                    <!--自动获取空间号，不可自填-->
                                    <span><input class="rowInput classId" type="text" placeholder="350000" readonly></span>
                                </div>
                                <div class="row">
                                    <span class="leftClassFormTitle">课堂标题:</span>
                                    <span>
                                        <input class="rowInput titleInput"  type="text" placeholder="直观的标题更能吸引人哦" maxlength="12" onchange="this.value=this.value.substring(0,12)" onkeydown="this.value=this.value.substring(0,12)" onkeyup="this.value=this.value.substring(0,12)">
                                        <span class="t_h"><i>0</i>/12</span>
                                    </span>
                                </div>
                                <div class="row">
                                    <span class="leftClassFormTitle classInfoTitle">课堂详情:</span>
                                    <span class="classInfoContent">
                                        <textarea class="intruTextarea" name="" cols="30" rows="10" placeholder="请输入课堂详情" maxlength="200" onchange="this.value=this.value.substring(0,200)" onkeydown="this.value=this.value.substring(0,200)" onkeyup="this.value=this.value.substring(0,200)"></textarea>
                                        <span class="t_h"><i>0</i>/200</span>
                                    </span>
                                </div>

                                <div class="row startTimeWrap">
                                    <span class="leftClassFormTitle dateTitle">开始时间:</span>
                                    <!--选择日期-->
                                    <span class="chooseStarDate">
                                       <div class="info-edit-date c-datepicker-date-editor c-datepicker-single-editor J-datepicker-day1 mt10">
                                            <input type="text" autocomplete="off" name="" placeholder="选择日期" readonly class="c-datepicker-data-input only-date" value="" id="chooseDate">
                                        </div>
                                        <div class="choose-date">
                                             <img src="images/icon/btn_date.png" alt="">
                                        </div>
                                    </span>

                                    <!--选择时间-->
                                    <span class="chooseStarTime">
                                       <div class="info-edit-date c-datepicker-date-editor c-datepicker-single-editor J-datepicker-time mt10">
                                            <input type="text" autocomplete="off" name="" placeholder="选择时间" readonly class="c-datepicker-data-input only-date" value="" id="timePicker">
                                        </div>
                                        <div class="choose-date">
                                             <img src="images/icon/btn_time.png" alt="">
                                        </div>
                                    </span>
                                </div>

                                <div class="row uploadWrap">

                                    <span class="leftClassFormTitle classImgProgress">课堂图片:</span>
                                    <span class="uploadProgress">
                                        <!--添加按钮-->
                                        <a href="javascript:void(0)"><div class="addImgBtn"></div></a>
                                        <div class="uploadProgress">
                                        </div>

                                        <input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg">
                                    </span>
                                    <span class="uploadBtnWrap" style="display: block"><button class="uploadBtn">重新上传</button></span>
                                    <div class="tip">请确保图片小于400KB，尺寸大于576*324</div>
                                </div>

                            </form>
                        </section>

                        <section class="rightClassImgPreView">
                            <div class="row">
                                <span class="leftClassFormTitle classImgTitle">图片预览:</span>
                                <span><img src="images/bac/classinfopage_03.png" alt=""></span>
                            </div>
                        </section>
                    </div>
                </section>

            </div>
            <div id="page2" class="stepPage">
                <!--直播邀请页-->
                <section class="stepPageContent">
                    <h1 class="form-title">直播邀请</h1>
                    <div class="selectMovieWrap">

                        <section class="leftSelectClass choosenClassListMode" >
                                <div class="classSelectTitle">
                                    指定教室邀请(<span>12</span>)
                                    <button class="addClassBtn"><img src="images/icon/btn_addclassroom.png" alt=""></button>
                                </div>
                                <div class="classSelectContent" id="classSelectContent">
                                    <ul>
                                        <!--index为当前教室的id值-->
                                        <li index="0">JO1A101<a href="javascript:void(0)" class="del-class"></a></li>
                                        <li index="1">JO1A102<a href="javascript:void(0)" class="del-class"></a></li>
                                        <li index="2">JO1A103<a href="javascript:void(0)" class="del-class"></a></li>
                                    </ul>
                                </div>
                        </section>

                        <section class="leftSelectClass addClassMode" style="display: none">
                            <a href="javascript:void(0)" class="addNewClassBtn">
                            <img src="images/icon/icon_Invitationclassroom.png" alt="">
                                指定邀请教室
                            </a>
                        </section>
                        <section class="rightSelectPerson choosenClassListMode"  style="display: none">
                                <div class="classSelectTitle">
                                    指定邀请人(<span>12</span>)
                                    <button class="addUserBtn"><img src="images/icon/btn_addperson.png" alt=""></button>
                                </div>
                                <div class="classSelectContent" id="userSelectSection">
                                    <ul>
                                        <!--index为当前教室的id值-->
                                        <li index="0">申贤彬<a href="javascript:void(0)" class="del-class"></a></li>
                                        <li index="1">刘在明<a href="javascript:void(0)" class="del-class"></a></li>
                                        <li index="2">李俊昊<a href="javascript:void(0)" class="del-class"></a></li>
                                    </ul>
                                </div>
                        </section>
                        <section class="rightSelectPerson addClassMode">
                            <a href="javascript:void(0)" class="addNewUserBtn">
                                <img src="images/icon/icon_Inviter.png" alt="">
                                指定邀请人</a>
                        </section>
                    </div>
                </section>

             <!--弹窗内容区-->
                <!--选择教室、用户开始-->
                    <section class="modeWindow chooseClass" style="display: none">

                    <!--弹窗标题区开始-->
                        <!--本地、在线教室切换-->
                        <div class="modeWindowTitle chooseClassTitle">

                            <ul>
                                <li><a href="javascript:void(0)" class="active">本地教室</a></li>
                                <li><a href="javascript:void(0)">在线教室</a></li>
                            </ul>

                            <div class="windowExitBtn">
                                <a href="javascript:void(0)"><img src="images/icon/add-window-icon_02.png" alt=""></a>
                            </div>
                        </div>
                        <!--本地、在线教室切换结束-->

                        <!--本地、在线用户切换-->
                        <div class="modeWindowTitle chooseUserTitle" style="display: none;">
                            <ul>
                                <li><a href="javascript:void(0)" class="active">本地用户</a></li>
                                <li><a href="javascript:void(0)">在线用户</a></li>
                            </ul>

                            <div class="windowExitBtn">
                                <a href="javascript:void(0)"><img src="images/icon/add-window-icon_02.png" alt=""></a>
                            </div>
                        </div>
                        <!--本地、在线用户切换结束-->
                    <!--弹窗标题区结束-->

                    <!--弹窗筛选+内容区-->
                        <div class="modeWindowContent1">
                            <div class="choose-space-pannel">

                           <!--教室筛选区 -->
                               <section class="choose-class">
                               <!--本地教室筛选区-->
                                   <div class="localClassChoosen">

                                       <div class="in-grade">
                                           <div class="in-addtress-title"> 按年级：</div>
                                           <div class="in-addtress-content">
                                               <a href="javascript:void(0)" class="all-grade-btn active">全部</a>
                                               <a href="javascript:void(0)">一年级</a>
                                               <a href="javascript:void(0)">二年级</a>
                                               <a href="javascript:void(0)">三年级</a>
                                               <a href="javascript:void(0)">四年级</a>
                                               <a href="javascript:void(0)">五年级</a>
                                               <a href="javascript:void(0)">六年级</a>
                                           </div>
                                       </div>
                                       <div class="in-addtress">
                                           <div class="in-addtress-title">按楼栋</div>
                                           <div class="in-addtress-content hide">
                                               <a href="javascript:void(0)" class="all-grade-btn active">全部</a>
                                               <a href="javascript:void(0)">JO1</a>
                                               <a href="javascript:void(0)">JO2</a>
                                               <a href="javascript:void(0)">JO3</a>
                                               <a href="javascript:void(0)">JO4</a>
                                               <a href="javascript:void(0)">JO5</a>
                                               <a href="javascript:void(0)">JO6</a>
                                               <a href="javascript:void(0)">JO1</a>
                                               <a href="javascript:void(0)">JO2</a>
                                               <a href="javascript:void(0)">JO3</a>
                                               <a href="javascript:void(0)">JO4</a>
                                               <a href="javascript:void(0)">JO5</a>
                                               <a href="javascript:void(0)">JO6</a>
                                               <a href="javascript:void(0)">JO1</a>
                                               <a href="javascript:void(0)">JO2</a>
                                               <a href="javascript:void(0)">JO3</a>
                                               <a href="javascript:void(0)">JO4</a>
                                               <a href="javascript:void(0)">JO5</a>
                                               <a href="javascript:void(0)">JO6</a>
                                               <a href="javascript:void(0)">JO1</a>
                                               <a href="javascript:void(0)">JO2</a>
                                               <a href="javascript:void(0)">JO3</a>
                                               <a href="javascript:void(0)">JO4</a>
                                               <a href="javascript:void(0)">JO5</a>
                                               <a href="javascript:void(0)">JO6</a>
                                               <span class="sildeUp">收起</span>
                                           </div>
                                           <div class="showAll">
                                               <a href="javascript:void(0)"><img src="images/icon/add-window-icon_07.png" alt=""></a>
                                           </div>
                                       </div>

                                   </div>
                               <!--本地教室筛选区结束-->

                               <!--在线教室筛选区-->
                                   <div class="onineClassChoosen">

                                       <section class="onlineClassSearchBar">
                                          <div class="onlineClassSearchBarContent col">
                                           <div class="col ">
                                               <div class="fourUnionSelected">
                                                   <label>
                                                       <select id="area">
                                                       </select>
                                                   </label>
                                                   <label>
                                                       <select id="cmbProvince">
                                                       </select>
                                                   </label>
                                                   <label>
                                                       <select id="cmbCity">
                                                       </select>
                                                   </label>
                                                   <label>
                                                       <select id="cmbArea">
                                                       </select>
                                                   </label>
                                               </div>


                                           </div>
                                            <div class="col">
                                                <input type="text" placeholder="或输入关键词查找" id="searchKeyword">
                                            </div>
                                          </div>
                                          <div class="col onlineRadioCol">
                                              <div class="onlineRadio">
                                                  <input type="radio" checked name="isOnline" id="onlineRadio" value="0"><label for="onlineRadio">在线</label>
                                              </div>
                                              <div class="onlineRadio">
                                                  <input type="radio" name="isOnline" value="1" id="allRadio"><label for="allRadio">全部</label>
                                              </div>
                                          </div>
                                           <div class="col">
                                               <button class="inputSearchBtn" id="inputSearchClassBtn">查找</button>
                                           </div>
                                   </section>



                                   </div>
                               <!--在线教室筛选区结束-->
                               </section>
                            <!--教室筛选区 -->

                            <!--用户筛选区 -->
                                <section class="choose-user" style="display: none">
                                    <!--本地用户筛选区-->
                                    <div class="localUserChoosen">

                                        <div class="in-grade">
                                            <div class="in-addtress-title"> 按年级：</div>
                                            <div class="in-addtress-content">
                                                <a href="javascript:void(0)" class="all-grade-btn active">全部</a>
                                                <a href="javascript:void(0)">一年级</a>
                                                <a href="javascript:void(0)">二年级</a>
                                                <a href="javascript:void(0)">三年级</a>
                                                <a href="javascript:void(0)">四年级</a>
                                                <a href="javascript:void(0)">五年级</a>
                                                <a href="javascript:void(0)">六年级</a>
                                            </div>
                                        </div>
                                        <div class="in-addtress">
                                            <div class="in-addtress-title">按楼栋</div>
                                            <div class="in-addtress-content hide">
                                                <a href="javascript:void(0)" class="all-grade-btn active">全部</a>
                                                <a href="javascript:void(0)">JO1</a>
                                                <a href="javascript:void(0)">JO2</a>
                                                <a href="javascript:void(0)">JO3</a>
                                                <a href="javascript:void(0)">JO4</a>
                                                <a href="javascript:void(0)">JO5</a>
                                                <a href="javascript:void(0)">JO6</a>
                                                <a href="javascript:void(0)">JO1</a>
                                                <a href="javascript:void(0)">JO2</a>
                                                <a href="javascript:void(0)">JO3</a>
                                                <a href="javascript:void(0)">JO4</a>
                                                <a href="javascript:void(0)">JO5</a>
                                                <a href="javascript:void(0)">JO6</a>
                                                <a href="javascript:void(0)">JO1</a>
                                                <a href="javascript:void(0)">JO2</a>
                                                <a href="javascript:void(0)">JO3</a>
                                                <a href="javascript:void(0)">JO4</a>
                                                <a href="javascript:void(0)">JO5</a>
                                                <a href="javascript:void(0)">JO6</a>
                                                <a href="javascript:void(0)">JO1</a>
                                                <a href="javascript:void(0)">JO2</a>
                                                <a href="javascript:void(0)">JO3</a>
                                                <a href="javascript:void(0)">JO4</a>
                                                <a href="javascript:void(0)">JO5</a>
                                                <a href="javascript:void(0)">JO6</a>
                                                <span class="sildeUp">收起</span>
                                            </div>
                                            <div class="showAll">
                                                <a href="javascript:void(0)"><img src="images/icon/add-window-icon_07.png" alt=""></a>
                                            </div>
                                        </div>

                                    </div>
                                    <!--本地用户筛选区结束-->

                                    <!--在线用户筛选区-->
                                    <div class="onineUserChoosen">

                                        <section class="onlineClassSearchBar">
                                            <div class="onlineClassSearchBarContent col">
                                                <div class="col ">
                                                    <div class="fourUnionSelected">
                                                        <label>
                                                            <select id="userArea">
                                                            </select>
                                                        </label>
                                                        <label>
                                                            <select id="userCmbProvince">
                                                            </select>
                                                        </label>
                                                        <label>
                                                            <select id="userCmbCity">
                                                            </select>
                                                        </label>
                                                        <label>
                                                            <select id="userCmbArea">
                                                            </select>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <input type="text" placeholder="或输入关键词查找" id="userSearchKeyword">
                                                </div>
                                            </div>
                                            <div class="col onlineRadioCol">

                                                <div class="onlineRadio">
                                                    <input type="radio" checked name="userIsOnline" id="userOnlineRadio" value="0"><label for="userOnlineRadio">在线</label>
                                                </div>

                                                <div class="onlineRadio">
                                                    <input type="radio" name="userIsOnline" value="1" id="userAllRadio"><label for="userAllRadio">全部</label>
                                                </div>

                                            </div>
                                            <div class="col">
                                                <button class="inputSearchBtn" id="userInputSearchClassBtn">查找</button>
                                            </div>
                                        </section>

                                    </div>
                                    <!--在线用户筛选区结束-->
                                </section>
                            <!--用户筛选区 -->

                               <div class="hand-choose-pannel">

                                    <div class="space-list">
                                        <ul class="space-list-ul">
                                            <!--<li index="0"><a href="javascript:void(0)">教学楼A101</a></li>-->
                                            <!--<li index="1"><a href="javascript:void(0)">教学楼A102</a></li>-->
                                            <!--<li index="2"><a href="javascript:void(0)">教学楼A103</a></li>-->
                                            <!--<li index="3"><a href="javascript:void(0)">教学楼A104</a></li>-->
                                            <!--<li index="4"><a href="javascript:void(0)">教学楼A105</a></li>-->
                                            <!--<li index="5"><a href="javascript:void(0)">教学楼A106</a></li>-->
                                            <!--<li index="6"><a href="javascript:void(0)">教学楼A107</a></li>-->
                                            <!--<li index="7"><a href="javascript:void(0)">教学楼A108</a></li>-->
                                            <!--<li index="8"><a href="javascript:void(0)">教学楼A109</a></li>-->
                                            <!--<li index="9"><a href="javascript:void(0)">教学楼A110</a></li>-->
                                            <!--<li index="10"><a href="javascript:void(0)">教学楼A111</a></li>-->
                                            <!--<li index="11"><a href="javascript:void(0)">教学楼A112</a></li>-->
                                            <!--<li index="12"><a href="javascript:void(0)">教学楼A113</a></li>-->
                                            <!--<li index="13"><a href="javascript:void(0)">教学楼A114</a></li>-->
                                            <!--<li index="14"><a href="javascript:void(0)">教学楼A115</a></li>-->
                                            <!--<li index="15"><a href="javascript:void(0)">教学楼A116</a></li>-->
                                            <!--<li index="16"><a href="javascript:void(0)">教学楼A117</a></li>-->
                                            <!--<li index="17"><a href="javascript:void(0)">教学楼A118</a></li>-->
                                            <!--<li index="18"><a href="javascript:void(0)">教学楼A119</a></li>-->
                                            <!--<li index="19"><a href="javascript:void(0)">教学楼A120</a></li>-->
                                            <!--<li index="20"><a href="javascript:void(0)">教学楼A121</a></li>-->
                                            <!--<li index="21"><a href="javascript:void(0)">教学楼A122</a></li>-->
                                            <!--<li index="22"><a href="javascript:void(0)">教学楼A123</a></li>-->
                                            <!--<li index="23"><a href="javascript:void(0)">教学楼A124</a></li>-->
                                            <!--<li index="24"><a href="javascript:void(0)">教学楼A125</a></li>-->
                                            <!--<li index="25"><a href="javascript:void(0)">教学楼A126</a></li>-->
                                            <!--<li index="26"><a href="javascript:void(0)">教学楼A127</a></li>-->
                                        </ul>
                                    </div>


                                    <ul class="pagination" id="Pagination">

                                    </ul>

                                    <div class="all-select"><button class="btn-blue btn">全选加入</button></div>

                                </div>
                                <div class="selected-spaces">
                                    <div class="selected-title">

                                        <div class="selected-title-content">当前邀请的教室</div>

                                        <div class="all-clear-btn">
                                            <a href="javascript:void(0)">
                                              <img src="images/icon/add-window-icon_04.png" alt="">
                                                <span class="all-clear-btn-content"> 清空 </span>
                                            </a>
                                        </div>
                                    </div>
                                    <ul class="space-selected-content">
                                    </ul>
                                </div>

                                <div class="created-btn">

                                    <!--确定邀请空间按钮，点击后将内容添加进教室列表中-->
                                    <button class="btn-blue btn" id="class-confirm-btn">确定邀请</button>

                                    <!--确定邀请用户按钮，点击后将内容添加进用户列表中-->
                                    <button class="btn-blue btn" id="user-confirm-btn" style="display: none">确定邀请</button>
                                </div>
                            </div>
                        </div>
                    <!--弹窗筛选+内容区-->
                    </section>
                <!--选择教室、用户结束-->
            <!--弹窗内容区结束-->

            </div>
            <div id="page3" class="stepPage">
                <!--输入公告页-->
                <section class="stepPageContent">
                    <h1 class="form-title">输入邀请公告</h1>
                    <div class="selectMovieWrap">
                        <textarea name="" placeholder="请输入邀请的公告..." cols="30" rows="10" class="inputInviteNote" maxlength="200" onchange="this.value=this.value.substring(0,200)" onkeydown="this.value=this.value.substring(0,200)" onkeyup="this.value=this.value.substring(0,200)"></textarea>
                        <span class="t_h"><i>0</i>/200</span>
                    </div>
                </section>

            </div>
            <div id="page4" class="stepPage">

                <!--选择画面选择页-->
               <section class="stepPageContent">
                    <h1 class="form-title">选择画面</h1>
                    <div class="selectMovieWrap">
                        <section class="leftSelectMenu">
                            <div class="selectMenuBtn">
                                <ul>
                                    <li class="active" index=0><a href="javascript:void(0)" class="active">主播模式</a></li>
                                    <li index=1 ><a href="javascript:void(0)">教学模式</a></li>
                                </ul>
                            </div>


                            <!--主播模式内容区-->
                            <div class="swiper-container selectModeList broadcastMode" id="broadcastMode">
                                <div class="swiper-wrapper">
                                    <!--isSelected属性保存当前菜单是否被选中的状态，0为未选择，1为已选中，ex:默认选中主播模式1-->
                                    <div class="swiper-slide mode-item active" isSelected="1" index="0">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">主播模式1</span>
                                        </a>
                                        <!--ex:默认选中主播模式1，添加选择框-->
                                        <!--<div class="inner-border"></div>-->
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="1">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img1.png" alt="">
                                            <span class="movieModeInfo">主播模式2</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item active" isSelected="1" index="0">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">主播模式1</span>
                                        </a>
                                        <!--ex:默认选中主播模式1，添加选择框-->
                                        <!--<div class="inner-border"></div>-->
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="1">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img1.png" alt="">
                                            <span class="movieModeInfo">主播模式2</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="2">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img3.png" alt="">
                                            <span class="movieModeInfo">主播模式3</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="3">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">主播模式4</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="4">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img1.png" alt="">
                                            <span class="movieModeInfo">主播模式5</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="5">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img3.png" alt="">
                                            <span class="movieModeInfo">主播模式6</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="6">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">主播模式7</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="7">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img1.png" alt="">
                                            <span class="movieModeInfo">主播模式8</span>
                                        </a>
                                    </div>



                                </div>


                            </div>

                            <!--教学模式内容区-->
                            <div class="swiper-container selectModeList teachMode" id="teachMode">
                                <div class="swiper-wrapper">
                                    <!--isSelected属性保存当前菜单是否被选中的状态，0为未选择，1为已选中，默认选中教学模式1-->
                                    <div class="swiper-slide mode-item active" isSelected="1" index="0">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img3.png" alt="">
                                            <span class="movieModeInfo">教学模式1</span>
                                        </a>
                                        <!--默认选中教学模式1，添加选择框-->
                                        <!--<div class="inner-border"></div>-->
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="1">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">教学模式2</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="2">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img1.png" alt="">
                                            <span class="movieModeInfo">教学模式3</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="3">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">教学模式4</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="4">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img3.png" alt="">
                                            <span class="movieModeInfo">教学模式5</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="5">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">教学模式6</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="6">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">教学模式7</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="7">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img3.png" alt="">
                                            <span class="movieModeInfo">教学模式8</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="8">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">教学模式9</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="9">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img3.png" alt="">
                                            <span class="movieModeInfo">教学模式10</span>
                                        </a>
                                    </div>

                                    <div class="swiper-slide mode-item" isSelected="0" index="10">
                                            <a href="javascript:void(0)">
                                                <img src="images/bac/ex_img1.png" alt="">
                                                <span class="movieModeInfo">教学模式11</span>
                                            </a>
                                    </div>
                                    <div class="swiper-slide mode-item" isSelected="0" index="11">
                                        <a href="javascript:void(0)">
                                            <img src="images/bac/ex_img.png" alt="">
                                            <span class="movieModeInfo">教学模式12</span>
                                        </a>
                                    </div>

                                </div>


                            </div>


                        </section>

                        <section class="rightMovieWrap">
                            <div class="rightMovieTitle">
                                <span class="titleMsg">画中画1</span>
                                <div class="active-status-wrap">
                                    <!--status为当前菜单对应的子菜单的optionIndex的值,当前值为默认值-->
                                    <span class="active-status" status="0" id="changeBac">更换画面背景</span>
                                    <div class="active-item-sub-menu">
                                        <!--optionIndex为当前选项的索引值,后台可设为当前筛选条件下某个选项的id-->
                                        <span optionIndex="0">background1</span>
                                        <span optionIndex="1">background2</span>
                                        <span optionIndex="2">background3</span>
                                        <span optionIndex="3">background4</span>
                                    </div>
                                </div>
                            </div>
                            <div class="rightMovieContent">
                                <img src="images/bac/ex_img2.png" alt="">
                            </div>
                        </section>
                    </div>
               </section>

            </div>
        </div>
    </div>
</main>

<div class="btn-group">
    <ul>
        <li class="home">
            <a href="newindex.html"><div><img src="images/btn/btn_backindex.png" alt=""></div>首页</a>
        </li>
        <li class="scan-code">
            <a href="javascript:void(0)">  <div><img src="images/btn/btn_Sweepcode.png" alt=""></div>扫码控制</a>
            <p class="show-code"><img src="images/icon/code.png" alt=""></p>
        </li>
        <li class="switch">
            <a href="javascript:void(0)">  <div><img src="images/btn/btn_switch.png" alt=""></div>电源</a>
        </li>
    </ul>
</div>
</body>
</html>
